<template>
    <el-scrollbar class="nav">
        <!-- <div class="subTitle"><span>{{ subTitle }}</span></div>
        <template v-if="currentData.length">
            <el-menu :default-active="activeIndex + ''">
                <template v-for="(item, index) in currentData">
                    <el-menu-item :index="item.path" @click="loadContent(item)">
                        <span>{{ item.permission_name }}</span>
                    </el-menu-item>
                </template>
            </el-menu>
        </template>
        <template v-else>
            <div class="subTitle">NoData</div>
        </template> -->
        ?
    </el-scrollbar>
</template>
<script setup>
import { ref, getCurrentInstance, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { piniaMainStore } from '../../store/mainStore'
const pinaData = piniaMainStore() // 引入主仓库
const { proxy } = getCurrentInstance()
// let navData = JSON.parse(window.localStorage.getItem('permissions')) // 整体数据
// let { navInfo } = storeToRefs(pinaData) // 变为响应式
// let subTitle = navData.filter(i => { return i.permission_id == navInfo.value.main })[0].permission_name // 固定的标题
// let currentData = navData.filter(i => { return i.parent_id == navInfo.value.main }) // 当前需要加载的数据
// let activeIndex  // 默认激活项 这里用的path 字符串

// if (currentData.length) { loadContent(currentData[0]); activeIndex = currentData[0].path } else { }

function loadContent(e) {
    activeIndex = e.path
    navInfo.value.sub = e.permission_id
    proxy.$router.push({ path: e.path })
}
</script>
<style scoped>
.nav {
    flex-shrink: 0;
    flex-grow: 0;
    width: 120px;
    height: calc(100vh - 60px);
    background-color: #FFFFFF;
    box-shadow: 0 0 6px 0 #ccc;
}

.subTitle:hover {
    cursor: not-allowed;
}

:deep() .el-menu-item,
.subTitle {
    font-size: 14px;
    line-height: 41px;
    height: 41px;
    padding: 0 10px 0 20px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis
}

:deep() .el-menu-item span {
    overflow: hidden;
    text-overflow: ellipsis
}

:deep() .is-active {
    color: inherit;
    background-color: #F5F5F5;
}
</style>